<template>
  <div>
    <el-card :body-style="{padding: '20px'}" :bordered="false" class="ivu-mt" shadow="never">
      <div class="Button">
        <el-button class="mr14" type="primary" @click="handleAdd">添加分类</el-button>
      </div>
    </el-card>

    <el-card :body-style="{padding: '0 20px 20px'}" :bordered="false" class="ivu-mt mt16" shadow="never">
      <el-table
        ref="table"
        v-loading="loading"
        :data="tableList"
        :row-key="getRowKey"
        class="ivu-mt mt14"
        empty-text="暂无数据"
        highlight-current-row
      >
        <el-table-column label="分类ID" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column label="分类名称">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="状态" min-width="100">
          <template slot-scope="scope">
            <el-switch
              class="defineSwitch"
              :active-value="1"
              :inactive-value="0"
              v-model="scope.row.status"
              :value="scope.row.status"
              size="large"
              active-text="启用"
              inactive-text="禁用"
              @change="changeSwitch(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" minWidth="100">
          <template slot-scope="scope">
            <a @click="handleEdit(scope.row)">编辑</a>
            <el-divider direction="vertical"></el-divider>
            <a @click="handleDelete(scope.row.id)">删除</a>
          </template>
        </el-table-column>

      </el-table>
    </el-card>

  </div>
</template>

<script>
import { categoryList, addCategory, deleteCategory, changeStatus, editCategory } from "@api/dishes";

export default {
  name: "category",
  data() {
    return {
      tableList: [],
      loading: false,
      addDialogShow: false
    };
  },
  methods: {
    getData() {
      this.loading = true;
      categoryList().then(res => {
        this.loading = false;
        this.tableList = res.data.data;
      });
    },
    getRowKey(row) {
      return row.id;
    },
    // 新增分类
    handleAdd() {
      this.$prompt("请输入分类名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(({ value }) => {

        addCategory({ name: value.trim() }).then(res => {
          this.$message({
            type: "success",
            message: "分类添加成功"
          });
          this.getData();
        });

      });
    },
    // 删除分类
    handleDelete(id) {
      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteCategory(id).then(() => {
          this.$message({
            type: "success",
            message: "分类删除成功"
          });
          this.getData();
        });
      }).catch();
    },
    // 修改分类状态
    changeSwitch(row) {
      changeStatus(row).catch(err => {
        this.$message({
          type: "error",
          message: "状态修改失败"
        });
        this.getData();
      });
    },
    // 修改分类
    handleEdit(row) {
      this.$prompt("请修改分类名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: row.name
      }).then(({ value }) => {

        editCategory({ id: row.id, name: value.trim() }).then(res => {
          this.$message({
            type: "success",
            message: "分类修改成功"
          });
          this.getData();
        });

      });
    }
  },
  created() {
    this.getData();
  }
};
</script>

<style scoped>

</style>
